<!--
 * @Author       : wfl
 * @LastEditors: qiye
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-05-26 10:46:14
 * @LastEditTime: 2024-01-23 15:58:47
-->
<script setup lang="ts" name="IkSideText">
const props = defineProps({
  // 名称
  name: {
    type: String,
    default: ''
  },
  // 头像
  avatar: {
    type: String,
    default: ''
  },
  // 头像类型，'url' | 'icon'
  avatarType: {
    type: String,
    default: 'url'
  },
  showIconBg: {
    type: Boolean,
    default: false
  },
  iconType: {
    type: String,
    default: 'info'
  },
  iconBackgroundColor: {
    type: String,
    default: ''
  },
  // 主文本
  text: {
    type: String,
    default: ''
  },
  // 副文本
  subText: {
    type: String,
    default: ''
  },
  shape: {
    type: String,
    default: 'square'
  },
  size: {
    type: Number,
    default: 50
  }
})

const { setFileUrl } = useHttpUrl()
const fixUrl = computed(() => setFileUrl(props.avatar))

const showImg = ref(Boolean(props.avatar))
const handError = () => {
  showImg.value = false
}
</script>

<template>
  <div class="side-text">
    <div class="side-left">
      <el-avatar
        v-if="avatarType === 'url'"
        :size="size"
        :shape="shape"
        :src="fixUrl"
        @error="handError"
      >
        <template v-if="!showImg">
          {{ name.slice(-2) }}
        </template>
      </el-avatar>
      <IkSvgIcon
        v-if="avatarType === 'icon'"
        :name="`iksvg_${avatar?.replace('iksvg_', '')}`"
        :show-bg="showIconBg"
        :type="iconType"
        :style="{ fontSize: showIconBg ? '34px' : '50px' }"
      />
      <IkLinearIcon v-if="avatarType === 'linearIcon'" :icon="avatar" :background-color="iconBackgroundColor" />
    </div>
    <div class="side-right">
      <p class="text-over-line">{{ text }}</p>
      <el-tooltip :content="subText">
        <p class="text-over-line">{{ subText }}</p>
      </el-tooltip>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.side-text {
  display: flex;

  .side-left {
    margin-right: 12px;
  }

  .side-right {
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;

    p {
      overflow: hidden;
      text-overflow: ellipsis;

      &:last-child {
        color: var(--ik-vice-text-color);
      }
    }
  }
}
</style>
